<template>
  <div class="statistics">
    <el-card>
      <el-row>
        <el-col :span="12">
          <el-card>
            <h3>订单统计</h3>
            <p>总订单数: {{ orderStats.total_orders }}</p>
            <p>总收入: {{ orderStats.total_revenue }}</p>
            <p>已支付订单数: {{ orderStats.paid_orders }}</p> <!-- 添加已支付订单数 -->
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <h3>商品销量排行</h3>
            <el-table :data="productStats" border>
              <el-table-column prop="product_name" label="商品名称"></el-table-column>
              <el-table-column prop="total_sales" label="销量"></el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getOrderStats, getProductStats } from '@/api/shop/statistics';

export default {
  data() {
    return {
      orderStats: {},
      productStats: []
    };
  },
  created() {
    this.fetchStatistics();
  },
  methods: {
    async fetchStatistics() {
      const { data: orderStats } = await getOrderStats();
      const { data: productStats } = await getProductStats();
      this.orderStats = orderStats[0] || {};  // 这里假设返回的是一个数组，取第一个元素
      this.productStats = productStats;
    }
  }
};
</script>
